import UserContext, { UserType } from './store'
import { useState, useContext } from 'react'

function ConsumerComponent() {
  const user = useContext<UserType>(UserContext)

  return (
    <div>
      <span>
        {user.first}
        {user.last}
      </span>
    </div>
  )
}

export default function UseContextComponent() {
  const [user, setUser] = useState<UserType>({
    first: 'zhou',
    last: 'fan'
  })
  return (
    <UserContext.Provider value={user}>
      <ConsumerComponent />
      <button
        onClick={() =>
          setUser({
            first: '夏天',
            last: '周一帆'
          })
        }
      >
        改变用户
      </button>
    </UserContext.Provider>
  )
}
